.search{
  position: relative;
  width: 20rem;
  .search__input {
    height: 3rem;
    border: none;
    border-radius: 1rem;
    font-size: 1.4rem;
    padding:0  6rem 0 3.8rem;
    width: 100%;
    box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
    background: none;
    font-family: inherit;
    color: var(--greyDark);
  }
  .search__input::placeholder {
    color: var(--greyLight-3);
  }
  .search__input:focus {
    outline: none;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  }
  .search__input:focus + .search__icon {
    color: var(--primary);
  }
  .search__icon {
    // height: 2rem;
    position: absolute;
    font-size: 2rem;
    padding: 0 1rem;
    display: flex;
    color: var(--greyDark);
    transition: 0.3s ease;
    top: .4rem;
  }
  button{
    position: absolute;
    top: 0.4rem;
    font-size: 1rem;
    right: 0.5rem;
    // width: 4rem;
    color: var(--greyDark);
    height: 1rem;
    height: 72%;
    font-size: 1rem;
    line-height: 1.7rem;
    border-radius: 1rem;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
    /* height: 1rem; */
    background: none;
    transition: 0.3s ease;
    .ant-spin{
      color: var(--greyDark);
    }
  
    
    // span{
    //   top: 23%!important;
    //   left: 41%;
      
    // }
  }
  button:hover{
    cursor: pointer;
    color: var(--primary);
  }
  button:active {
    box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
  }
  .left{
    padding-left: 1rem!important;
  }
  .rightbutton{
    padding-right: .8rem;
  }
}




// .ant-input-group-wrapper{
//   width: 20rem;
//   border-radius: 1rem;
//   overflow: hidden;
  
//   // box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
//   input{
//     background: none;
//     border: none;
//     box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
//   }
//   input::placeholder{
//     color: var(--greyLight-3);
//   }
//   input:focus{
//     border: none;
//     outline: none;
//     box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
//   }
//   .ant-input-group-addon{

//   }
// }